<!-- 别人的代码 ，借鉴用 -->
<template>
  <div>
    <SideMenu></SideMenu>
    <el-container>
      <el-aside width="300px" :style="'background-color:' + B_color_main_to + ';' +'color:'+T_color_main_to">
        新建课程区域
        <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                 v-model="color"
                 :background-color= B_color_main_to
                 :text-color= T_color_main_to
                 :active-text-color= colors
                 :style="'height:'+fullHeight+'px;'"
        >
          <el-menu-item index="0" v-if="Course > 0">
            <i class="el-icon-plus" @click="add_0"></i>
            <i class="el-icon-minus" @click="delete_0"></i>
            <span slot="title" style="font-size: 15px">{{CourseName}}</span>
          </el-menu-item>
          <el-submenu index="1" v-if="Course > 1">
            <template slot="title" >
              <i class="el-icon-plus" @click="add_1"></i>
              <i class="el-icon-minus" @click="delete_1"></i>
              <span slot="title">第一章</span>
            </template>
            <el-menu-item-group>
              <el-menu-item  index="1-0" @click="chose1_1" v-if="Course_1 > 0" >
                <span>第一节</span>
              </el-menu-item>
              <el-menu-item  index="1-1" @click="chose1_2" v-if="Course_1 > 1">
                <span>第二节</span>
              </el-menu-item>
              <el-menu-item  index="1-2" @click="chose1_3" v-if="Course_1 > 2">
                <span>第三节</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2" v-if="Course > 2">
            <template slot="title">
              <i class="el-icon-plus" @click="add_2"></i>
              <i class="el-icon-minus" @click="delete_2"></i>
              <span slot="title">第二章</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="chose2_1" v-if="Course_2 > 0" >第一节</el-menu-item>
              <el-menu-item index="2-2" @click="chose2_2" v-if="Course_2 > 1">第二节</el-menu-item>
              <el-menu-item index="2-3" @click="chose2_3" v-if="Course_2 > 2">第三节</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3" v-if="Course > 3">
            <template slot="title">
              <i class="el-icon-plus" @click="add_3"></i>
              <i class="el-icon-minus" @click="delete_3"></i>
              <span slot="title">第三章</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="chose3_1" v-if="Course_3 > 0">第一节</el-menu-item>
              <el-menu-item index="3-2" @click="chose3_2" v-if="Course_3 > 1">第二节</el-menu-item>
              <el-menu-item index="3-3" @click="chose3_3" v-if="Course_3 > 2">第三节</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4" v-if="Course > 4">
            <template slot="title">
              <i class="el-icon-plus" @click="add_4"></i>
              <i class="el-icon-minus" @click="delete_4"></i>
              <span slot="title">第四章</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="chose4_1" v-if="Course_4 > 0">
                <span >第一节</span>
              </el-menu-item>
              <el-menu-item index="4-2" @click="chose4_2" v-if="Course_4 > 1">
                <span>第二节</span>
              </el-menu-item>
              <el-menu-item index="4-3" @click="chose4_3" v-if="Course_4 > 2">第三节</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main id="el-person" :style="'background-color:' + B_color_main_to + ';' +'color:'+T_color_main_to">
        展示课程区域
        <el-card style="width: 50%;height:500px;margin: 50px auto">
          <h2> 创建课程 </h2>
          <el-form v-model="form" style="text-align: left" ref="formRef" :model="form">
            <el-form-item label="课程分类" :label-width="formLabelWidth" prop="type">
              <el-input v-model="form.type" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="课程名称" :label-width="formLabelWidth" prop="lessonname">
              <el-input v-model="form.lessonname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="教师名称" :label-width="formLabelWidth" prop="teachername">
              <el-input v-model="form.teachername" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="课程信息" :label-width="formLabelWidth" prop="info">
              <el-input v-model="form.info" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图片（暂未）" :label-width="formLabelWidth" prop="photo">
              <el-input  v-model="form.photo" autocomplete="off"></el-input>
            </el-form-item>
            <el-button style="margin-left: 220px"  @click="resetForm">重 置</el-button>
            <el-button style="margin-left: 50px" type="primary" @click="onSubmit">确 定</el-button>
          </el-form>
        </el-card>
        <div v-if="id===0">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="课程名" prop="course" style="width:60%;margin-left:18%;margin-top:10%">
              <el-input v-model="coursname" class="course" placeholder="请输入您需要创建的课程名称"></el-input>
            </el-form-item>
            <el-form-item label="课程分类" prop="course_fl" style="width:60%;margin-left:18%;margin-top:5%">
              <el-select v-model="value" placeholder="请选择课程分类" style="float:left">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <!--绑定值：{{value}}-->
            </el-form-item>
            <el-form-item label="课程介绍" prop="course_js" style="width:60%;margin-left:18%;margin-top:5%">
              <el-input type="textarea" :rows="5" v-model="course_js" class="course_js" placeholder="请介绍下您的课程，以便学生更好的选择！"></el-input>
            </el-form-item>
            <div id="fnishs" style="width:100%;float:left">
              <el-button @click="upCourseNews" style="margin-left:8%">确定新建</el-button>
            </div>
          </el-form>
        </div>
        <div v-if="id===11"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===12"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===13"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===21"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===22"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===23"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===31"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===32"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===33"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===41"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===42"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <div v-if="id===43"><UpVideo :Stringmatch = Stringmatch  style="margin-top:11%"></UpVideo></div>
        <el-dialog title="上传视频" :visible.sync="disabledialog">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
          <div slot="footer" class="dialog-footer">
            <el-button @click="disabledialog = false">取 消</el-button>
            <el-button type="primary" @click="disabledialog = false">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>

  import SideMenu from "../teacher/SideMenu";
  import UpVideo from "./UpVideo";
  export default {
    name: 'AddCourse',
    components: {UpVideo, SideMenu},
    props: {
      user: {
        type: String,
        required: true
      },
      musicurl: [],
      B_color_main_to: '',
      T_color_main_to: '',
      B_color_main: '',
      Boom_color: ''
    },
    data () {
      return {
        input:'',
        disabledialog:'false',
        colors: 'rgba(0, 206, 209, 1)',
        CourseName: '创建课程',
        Course: 1,
        Course_1: 0,
        Course_2: 0,
        Course_3: 0,
        Course_4: 0,
        coursname: '',
        course_js: '',
        id: 0,
        Stringmatch: 'coursefm',
        options: [{
          value: '移动开发',
          label: '移动开发'
        }, {
          value: '机器学习',
          label: '机器学习'
        }, {
          value: '人工智能',
          label: '人工智能'
        }, {
          value: 'Web开发',
          label: 'Web开发'
        }, {
          value: '大数据分析',
          label: '大数据分析'
        }],
        value: '',
        label: '',
        dialogFormVisible: false,
        form: {
          type: '',
          lessonname: '',
          teachername: '',
          info: '',
          // abs: '',
        },
        responseResult: [],
        formLabelWidth: '120px',

      }
    },
    mounted: function () {
    },
    methods: {
      chose1_1 () {
        this.id = 11
        this.Stringmatch = 'video11'
        this.disabledialog = true
      },
      chose1_2 () {
        this.id = 12
        this.Stringmatch = 'video12'
        this.disabledialog = true;
      },
      chose1_3 () {
        this.id = 13
        this.Stringmatch = 'video13'
        this.disabledialog = true;
      },
      chose2_1 () {
        this.id = 21
        this.Stringmatch = 'video21'
        this.disabledialog = true;
      },
      chose2_2 () {
        this.id = 22
        this.Stringmatch = 'video22'
        this.disabledialog = true;
      },
      chose2_3 () {
        this.id = 23
        this.Stringmatch = 'video23'
        this.disabledialog = true;
      },
      chose3_1 () {
        this.id = 31
        this.Stringmatch = 'video31'
        this.disabledialog = true;
      },
      chose3_2 () {
        this.id = 32
        this.Stringmatch = 'video32'
        this.disabledialog = true;
      },
      chose3_3 () {
        this.id = 33
        this.Stringmatch = 'video33'
        this.disabledialog = true;
      },
      chose4_1 () {
        this.id = 41
        this.Stringmatch = 'video41'
        this.disabledialog = true;
      },
      chose4_2 () {
        this.id = 42
        this.Stringmatch = 'video42'
        this.disabledialog = true;
      },
      chose4_3 () {
        this.id = 43
        this.Stringmatch = 'video43'
        this.disabledialog = true;
      },
      upCourseNews () {
        this.CourseName = this.coursname
        const that = this
        if (this.coursname === '') {
          this.$message.warning('课程名称不能为空！')
        } else if (this.value === '') {
          this.$message.warning('请为课程选择一个类别！')
        } else if (this.course_js === '') {
          this.$message.warning('请介绍下您的课程，以便于学生更好的选择！')
        } else {
          this.$axios
            .post('/upcoursenews', {
              coursename: this.coursname,
              coursefl: this.value,
              cousejs: this.course_js
            })
            .then(successResponse => {
              if (successResponse.data.code === 200) {
                that.$axios.get('http://localhost:8443/api/Courseisexist').then(resp => {
                  if (resp && resp.status === 200) {
                    if (resp.data === true) {
                      that.$message({message: '您已创建过改课程！', type: 'warning'})
                    } else {
                      this.$message.success('课程新建成功!')
                    }
                  }
                })
              }
            })
            .catch(failResponse => {
            })
        }
      },
      handleChange (data) {
        this.value = data.label
      },
      add_0 () {
        if (this.Course < 5) {
          this.Course++
        }
        if (this.Course >= 5) {
          this.$message.warning('学生压力大，老师手下留情别再添加新章节了！')
        }
      },
      delete_0 () {
        if (this.Course > 1) {
          this.Course--
        }
      },
      add_1 () {
        if (this.Course_1 < 3) {
          this.Course_1++
        }
        if (this.Course_1 >= 3) {
          this.$message.warning('学生压力大，老师手下留情别再添加新章节了！')
        }
      },
      delete_1 () {
        if (this.Course_1 > 0) {
          this.Course_1--
        }
      },
      add_2 () {
        if (this.Course_2 < 3) {
          this.Course_2++
        }
        if (this.Course_2 >= 3) {
          this.$message.warning('学生压力大，老师手下留情别再添加新章节了！')
        }
      },
      delete_2 () {
        if (this.Course_2 > 0) {
          this.Course_2--
        }
      },
      add_3 () {
        if (this.Course_3 < 3) {
          this.Course_3++
        }
        if (this.Course_3 >= 3) {
          this.$message.warning('学生压力大，老师手下留情别再添加新章节了！')
        }
      },
      delete_3 () {
        if (this.Course_3 > 0) {
          this.Course_3--
        }
      },
      add_4 () {
        if (this.Course_4 < 3) {
          this.Course_4++
        }
        if (this.Course_4 >= 3) {
          this.$message.warning('学生压力大，老师手下留情别再添加新章节了！')
        }
      },
      delete_4 () {
        if (this.Course_4 > 0) {
          this.Course_4--
        }
      },
      resetForm () {
        console.log(this)
        this.$refs.formRef.resetFields()
      },
      clear () {
        this.form = {
          id: '',
          title: '',
          author: '',
          date: '',
          cover: '',
          abs: '',
        }
      },
      onSubmit () {
        this.$axios
          .post('/addlesson', {
            type: this.form.type,
            lessonname: this.form.lessonname,
            teachername: this.form.teachername,
            info: this.form.info,
            photo: this.form.photo,
          }).then(resp => {
          if (resp && resp.status === 200) {
            this.dialogFormVisible = false
            this.$message.success('添加成功');
            this.resetForm()
          }
          else if (successResponse.data.code === 400){
            this.$message.error('添加失败');
          }
          else{
            this.$message.error('存在相同名字的课程');
          }
        })
      },
    }
  }
</script>
<style>
  #el-person {
    width: 400px;
    height: 1200px;
    background-color: #ffffff;
    margin-left: 20px;
    padding: 0;
  }
</style>
